<template>
  <div class="System_Diagra">
    <div class="pubBig Privilege">
      <div class="h0">
        <p class="lt"></p>
      </div>
      <div class="dDownMain">
        <div
          class="twoBox"
          :style="this.$route.query.Token ? 'top:50px;left:10px' : 'top: 100px'"
        >
          <!-- 上层查询卡片 -->
          <el-card class="box-card" style="height: 210px">
            <el-form
              label-position="right"
              label-width="120px"
              :model="formLabelAlign_search"
            >
              <el-form-item
                label="患者姓名："
                style="width: 33%; display: inline-block"
              >
                <el-input
                  v-model="formLabelAlign_search.name"
                  style="width: 50%"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="证件号码："
                style="width: 33%; display: inline-block"
              >
                <el-input
                  v-model="formLabelAlign_search.region"
                  style="width: 50%"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="患者标识号："
                style="width: 33%; display: inline-block"
              >
                <el-input
                  v-model="formLabelAlign_search.type"
                  style="width: 50%"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="开始时间："
                style="width: 33%; display: inline-block"
              >
                <el-date-picker
                  v-model="formLabelAlign_search.time1"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                label="结束时间："
                style="width: 33%; display: inline-block"
              >
                <el-date-picker
                  v-model="formLabelAlign_search.time2"
                  type="date"
                  placeholder="选择日期"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                label="文档类型："
                style="width: 33%; display: inline-block"
              >
                <el-select
                  v-model="formLabelAlign_search.value"
                  filterable
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.flag"
                    :label="item.label"
                    :value="item.flag"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <div style="text-align: center; margin-top: 10px">
              <el-button size="mini" @click="gettable_data" type="primary"
                >查询</el-button
              >
              <el-button size="mini" @click="clear_form">重置</el-button>
            </div>
          </el-card>
          <!-- 下层表格卡片 -->
          <el-card class="box-card" style="margin-top: 10px">
            <div>
              <el-row>
                <el-col :span="12">
                  <span style="font-size: 24px">患者列表</span>
                  <!-- <el-button
                    size="small"
                    style="margin-left:35px;margin-right:15px"
                  >生成所选</el-button>
                  <el-button size="small">批量生成</el-button> -->
                </el-col>
                <el-col :span="12">
                  <span
                    >患者总数：<span style="color: red">990172</span>人</span
                  >
                  <span style="margin-left: 50px"
                    >文档总数：<span style="color: red">990172</span>份</span
                  >
                  <span style="margin-left: 50px">隐私保护：</span>
                  <el-switch
                    v-model="switch_yinsi"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="Yinsi_change"
                  >
                  </el-switch>
                  <el-button
                    type="text"
                    icon="el-icon-setting"
                    style="margin-left: 15px; color: #000; font-size: 18px"
                  ></el-button>
                </el-col>
              </el-row>
            </div>
            <!-- 表格 -->
            <div>
              <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                v-loading="table_loading"
                height="500"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="主索引号" prop="Code" width="165">
                </el-table-column>
                <el-table-column prop="Name" label="患者姓名">
                </el-table-column>
                <el-table-column label="证件号码" prop="IdCard">
                  <template slot-scope="scope">
                    <span v-if="switch_yinsi">{{
                      scope.row.IdCard | formatIDcard
                    }}</span>
                    <span v-if="!switch_yinsi">{{ scope.row.IdCard }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="联系电话" prop="Telphone">
                  <template slot-scope="scope">
                    <span v-if="switch_yinsi">{{
                      scope.row.Telphone | formatPhone
                    }}</span>
                    <span v-if="!switch_yinsi">{{ scope.row.Telphone }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="性别名称" prop="GenderName">
                </el-table-column>
                <el-table-column label="出生日期" prop="Born">
                </el-table-column>
                <el-table-column label="ABO血型" prop="ABOName">
                </el-table-column>
                <el-table-column label="RH血型" prop="RHName">
                </el-table-column>
                <el-table-column label="联系人" prop="ContactName">
                </el-table-column>
                <el-table-column label="操作" width="180px" align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      icon="el-icon-s-promotion"
                      @click="openSearch(scope.row)"
                    ></el-button>
                    <!-- <el-button
                      size="mini"
                      icon="el-icon-plus"
                      @click="openAdd(scope.row)"
                    ></el-button>
                    <el-button
                      size="mini"
                      icon="el-icon-refresh"
                      @click="openLook(scope.row)"
                    ></el-button> -->
                  </template>
                </el-table-column>
              </el-table>
              <div class="block" style="margin-top: 15px; text-align: center">
                <el-pagination
                  layout="prev, pager, next"
                  :total="pages.total"
                  :page-size="pages.limit"
                  :current-page="pages.page"
                  @current-change="page_change"
                >
                </el-pagination>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      formLabelAlign_search: {},
      options: [
        {
          label: "病历概要",
          flag: "EMR01",
        },
        {
          label: "门(急)诊病历",
          flag: "EMR02",
        },
        {
          label: "急诊留观病历",
          flag: "EMR03",
        },
        {
          label: "西药处方",
          flag: "EMR04",
        },
        {
          label: "中药处方",
          flag: "EMR05",
        },
        {
          label: "检查报告",
          flag: "EMR06",
        },
        {
          label: "检验报告",
          flag: "EMR07",
        },
        {
          label: "治疗记录",
          flag: "EMR08",
        },
        {
          label: "一般手术记录",
          flag: "EMR09",
        },
        {
          label: "麻醉术前访视记录",
          flag: "EMR10",
        },
        {
          label: "麻醉记录",
          flag: "EMR11",
        },
        {
          label: "麻醉术后访视记录",
          flag: "EMR12",
        },
        {
          label: "输血记录",
          flag: "EMR13",
        },
        {
          label: "待产记录",
          flag: "EMR14",
        },
        {
          label: "阴道分娩记录",
          flag: "EMR15",
        },
        {
          label: "剖宫产记录",
          flag: "EMR16",
        },
        {
          label: "一般护理记录",
          flag: "EMR17",
        },
        {
          label: "病重（病危）护理记录",
          flag: "EMR18",
        },
        {
          label: "手术护理记录",
          flag: "EMR19",
        },
        {
          label: "生命体征测量记录",
          flag: "EMR20",
        },
        {
          label: "出入量记录",
          flag: "EMR21",
        },
        {
          label: "高值耗材使用记录",
          flag: "EMR22",
        },
        {
          label: "入院评估",
          flag: "EMR23",
        },
        {
          label: "护理计划",
          flag: "EMR24",
        },
        {
          label: "出院评估与指导",
          flag: "EMR25",
        },
        {
          label: "手术知情同意书",
          flag: "EMR26",
        },
        {
          label: "麻醉知情同意书",
          flag: "EMR27",
        },
        {
          label: "输血治疗同意书",
          flag: "EMR28",
        },
        {
          label: "特殊检查及特殊治疗同意书",
          flag: "EMR29",
        },
        {
          label: "病危（重）通知书",
          flag: "EMR30",
        },
        {
          label: "其他知情同意书",
          flag: "EMR31",
        },
        {
          label: "住院病案首页",
          flag: "EMR32",
        },
        {
          label: "中医住院病案首页",
          flag: "EMR33",
        },
        {
          label: "入院记录",
          flag: "EMR34",
        },
        {
          label: "24小时内入出院记录",
          flag: "EMR35",
        },
        {
          label: "24小时内入院死亡记录",
          flag: "EMR36",
        },
        {
          label: "住院病程记录 首次病程记录",
          flag: "EMR37",
        },
        {
          label: "住院病程记录 日常病程记录",
          flag: "EMR38",
        },
        {
          label: "住院病程记录-上级医师查房记录",
          flag: "EMR39",
        },
        {
          label: "住院病程记录-疑难病例讨论记录",
          flag: "EMR40",
        },
        {
          label: "住院病程记录-交接班记录",
          flag: "EMR41",
        },
        {
          label: "住院病程记录-转科记录",
          flag: "EMR42",
        },
        {
          label: "住院病程记录-阶段小结",
          flag: "EMR43",
        },
        {
          label: "住院病程记录-抢救记录",
          flag: "EMR44",
        },
        {
          label: "住院病程记录-会诊记录",
          flag: "EMR45",
        },
        {
          label: "住院病程记录-术前小结",
          flag: "EMR46",
        },
        {
          label: "住院病程记录-术前讨论",
          flag: "EMR47",
        },
        {
          label: "住院病程记录-术后首次病程记录",
          flag: "EMR48",
        },
        {
          label: "住院病程记录-出院记录",
          flag: "EMR49",
        },
        {
          label: "住院病程记录-死亡记录",
          flag: "EMR50",
        },
        {
          label: "住院病程记录-死亡病例讨论记录",
          flag: "EMR51",
        },
        {
          label: "住院医嘱",
          flag: "EMR52",
        },
        {
          label: "出院小结",
          flag: "EMR53",
        },
      ],
      switch_yinsi: true,
      tableData: [],
      multipleSelection: [],
      dialogVisible_Add: false,
      dialogVisible_search: false,
      formLabelAlign_items_search: {},
      formLabelAlign_items_Add: {},
      checked: true,
      tableData_item_Add: [
        {
          label: "病历概要",
          flag: "EMR01",
        },
        {
          label: "门(急)诊病历",
          flag: "EMR02",
        },
        {
          label: "急诊留观病历",
          flag: "EMR03",
        },
        {
          label: "西药处方",
          flag: "EMR04",
        },
        {
          label: "中药处方",
          flag: "EMR05",
        },
        {
          label: "检查报告",
          flag: "EMR06",
        },
        {
          label: "检验报告",
          flag: "EMR07",
        },
        {
          label: "治疗记录",
          flag: "EMR08",
        },
        {
          label: "一般手术记录",
          flag: "EMR09",
        },
        {
          label: "麻醉术前访视记录",
          flag: "EMR10",
        },
        {
          label: "麻醉记录",
          flag: "EMR11",
        },
        {
          label: "麻醉术后访视记录",
          flag: "EMR12",
        },
        {
          label: "输血记录",
          flag: "EMR13",
        },
        {
          label: "待产记录",
          flag: "EMR14",
        },
        {
          label: "阴道分娩记录",
          flag: "EMR15",
        },
        {
          label: "剖宫产记录",
          flag: "EMR16",
        },
        {
          label: "一般护理记录",
          flag: "EMR17",
        },
        {
          label: "病重（病危）护理记录",
          flag: "EMR18",
        },
        {
          label: "手术护理记录",
          flag: "EMR19",
        },
        {
          label: "生命体征测量记录",
          flag: "EMR20",
        },
        {
          label: "出入量记录",
          flag: "EMR21",
        },
        {
          label: "高值耗材使用记录",
          flag: "EMR22",
        },
        {
          label: "入院评估",
          flag: "EMR23",
        },
        {
          label: "护理计划",
          flag: "EMR24",
        },
        {
          label: "出院评估与指导",
          flag: "EMR25",
        },
        {
          label: "手术知情同意书",
          flag: "EMR26",
        },
        {
          label: "麻醉知情同意书",
          flag: "EMR27",
        },
        {
          label: "输血治疗同意书",
          flag: "EMR28",
        },
        {
          label: "特殊检查及特殊治疗同意书",
          flag: "EMR29",
        },
        {
          label: "病危（重）通知书",
          flag: "EMR30",
        },
        {
          label: "其他知情同意书",
          flag: "EMR31",
        },
        {
          label: "住院病案首页",
          flag: "EMR32",
        },
        {
          label: "中医住院病案首页",
          flag: "EMR33",
        },
        {
          label: "入院记录",
          flag: "EMR34",
        },
        {
          label: "24小时内入出院记录",
          flag: "EMR35",
        },
        {
          label: "24小时内入院死亡记录",
          flag: "EMR36",
        },
        {
          label: "住院病程记录 首次病程记录",
          flag: "EMR37",
        },
        {
          label: "住院病程记录 日常病程记录",
          flag: "EMR38",
        },
        {
          label: "住院病程记录-上级医师查房记录",
          flag: "EMR39",
        },
        {
          label: "住院病程记录-疑难病例讨论记录",
          flag: "EMR40",
        },
        {
          label: "住院病程记录-交接班记录",
          flag: "EMR41",
        },
        {
          label: "住院病程记录-转科记录",
          flag: "EMR42",
        },
        {
          label: "住院病程记录-阶段小结",
          flag: "EMR43",
        },
        {
          label: "住院病程记录-抢救记录",
          flag: "EMR44",
        },
        {
          label: "住院病程记录-会诊记录",
          flag: "EMR45",
        },
        {
          label: "住院病程记录-术前小结",
          flag: "EMR46",
        },
        {
          label: "住院病程记录-术前讨论",
          flag: "EMR47",
        },
        {
          label: "住院病程记录-术后首次病程记录",
          flag: "EMR48",
        },
        {
          label: "住院病程记录-出院记录",
          flag: "EMR49",
        },
        {
          label: "住院病程记录-死亡记录",
          flag: "EMR50",
        },
        {
          label: "住院病程记录-死亡病例讨论记录",
          flag: "EMR51",
        },
        {
          label: "住院医嘱",
          flag: "EMR52",
        },
        {
          label: "出院小结",
          flag: "EMR53",
        },
      ],
      table_loading: false,
      pages: {
        page: 1,
        limit: 15,
        total: 0,
      },
    };
  },
  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleClose_search() {
      this.dialogVisible_search = false;
      this.formLabelAlign_items_search = {};
    },
    openSearch(val) {
      console.log(val);
      let Name = val.Name;
      let Code = val.Code;
      let routeData = this.$router.resolve({
        path: "/pacture",
        query: { Name, Code },
      });
      this.$router.push(routeData.href);
      // window.open(routeData.href, "_blank");
    },
    handleClose_Add() {
      this.dialogVisible_Add = false;
      this.formLabelAlign_items_Add = {};
    },
    openAdd(val) {
      console.log(val);
      this.formLabelAlign_items_Add = val;
      this.dialogVisible_Add = true;
    },
    openLook(val) {
      console.log(val);
      this.$message({
        message: "患者信息不完整无法调阅",
        type: "warning",
      });
    },
    Yinsi_change(val) {
      // 隐私切换
      console.log(val);
      this.switch_yinsi = val;
    },
    gettable_data() {
      var body = {
        page: this.pages.page,
        limit: this.pages.limit,
        Name: this.formLabelAlign_search.name,
        CardNo: this.formLabelAlign_search.region,
        PatientCode: this.formLabelAlign_search.type,
        StartTime: this.formLabelAlign_search.time1,
        EndTime: this.formLabelAlign_search.time2,
      };
      this.table_loading = true;
      this.$post("/Patient/PageList", body).then((res) => {
        if (res.code == 0) {
          this.tableData = res.data.list;
          this.pages.total = res.data.TotalCount;
          // this.page_left.total = res.data.TotalCount;
          this.table_loading = false;
        } else if (res.code == -1) {
          this.$message.error(res.msg);
          this.table_loading = false;
        }
      });
    },
    clear_form() {
      this.formLabelAlign_search = {};
    },
    page_change(val) {
      this.pages.page = val;
      this.gettable_data();
    },
  },
  mounted() {
    // document.getElementById("2").focus();
    this.gettable_data();
  },
  created() {
    if (this.$route.query.Token) {
      localStorage.setItem("Token", this.$route.query.Token);
    }
  },
  filters: {
    formatIDcard(value) {
      // 身份证
      if (!value) return "";
      let str = value;
      str = str.toString().replace(/^(.{3})(?:\w+)(.{4})$/, "$1***********$2");
      return str;
    },
    formatPhone(value) {
      // 电话
      if (!value) return "";
      let str = value;
      str = str.toString().replace(/^(\d{3})(\d{4})(\d{4})/g, "$1****$3");
      return str;
    },
  },
};
</script>
<style lang="scss">
.System_Diagra {
  .top-input {
    display: inline-block;
    width: 350px;
  }

  .box-top {
    margin-top: 15px;
    margin-left: 5px;
  }
}
</style>
